<template>
  <div>
<!--    <el-page-header style="margin: 50px;" title="首页" content="订单信息"></el-page-header>-->
    <div style="margin: 5px 0;padding: 10px 0;text-align: center;">
      <el-input style="margin-right:15px;width: 20%;left: auto" placeholder="请输入订单名称" size="large" suffix-icon="el-icon-search"
                v-model="names"
                @keydown.native.enter="load"></el-input>
      <el-input style="margin-right:15px;width: 20%;left: auto" placeholder="请输入规格" size="large" suffix-icon="el-icon-search"
                v-model="specification" @keydown.native.enter="load"></el-input>
      <!--          <el-input style="width: 30%;left: auto" placeholder="请输入价格" suffix-icon="el-icon-search" v-model="price"-->
      <!--                    @keydown.native.enter="load"></el-input>-->
      <el-button style="margin-left: 5px" class="el-button el-button--primary" size="large" @click="load">搜索</el-button>
      <el-button style="margin-left: 5px" class="el-button el-button--warning" size="large" @click="reset">重置</el-button>
      <el-button style="margin-left: 100px" type="success" @click="handleAdd" size="large">新增<i style="margin-left: 1px"
                                                                                   class="el-icon-circle-plus-outline"></i>
      </el-button>

      <el-popconfirm
          confirm-button-text="确定"
          confirm-button-type="danger"
          cancel-button-text="不了"
          title="确定删除该订单信息么?"
          icon-color="red"
          @confirm="handleDelBatch"
          style="margin-left: 5px">
        <el-button style="margin-left: 45px" type="danger" slot="reference" size="large">批量删除<i style="margin-left: 1px"
                                                                                   class="el-icon-delete"></i>
        </el-button>
      </el-popconfirm>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
              @selection-change="handleSelectionChange">
      <!--check box-->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="订单ID" width="60">
      </el-table-column>
      <el-table-column prop="userId" label="用户Id">
      </el-table-column>
      <el-table-column prop="userName" label="用户名">
      </el-table-column>
      <el-table-column prop="merchandiseName" label="商品名称">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="specification" label="规格">
      </el-table-column>
      <el-table-column prop="quantity" label="数量" width="60">
      </el-table-column>
      <el-table-column style="width: auto;" prop="" label="操作" width="280">
        <template slot-scope="scope">
          <el-button type="warning" @click="handleEdit(scope.row)" size="large">修改<i style="margin-left: 1px"
                                                                        class="el-icon-edit-outline"></i>
          </el-button>
          <el-popconfirm
              confirm-button-text="确定"
              confirm-button-type="danger"
              cancel-button-text="不了"
              title="确定删除该订单信息么?"
              icon-color="red"
              @confirm="handlerDel(scope.row.id)"
              style="margin-left: 5px">
            <el-button type="danger" slot="reference" size="large">删除<i style="margin-left: 1px"
                                                           class="el-icon-document-delete"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0;text-align: center;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 15, 45, 60]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="font-size: xx-large">
      </el-pagination>
    </div>
    <el-dialog title="订单信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="用户ID">
          <el-input v-model="merchandise.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="merchandise.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="merchandise.merchandiseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="merchandise.specification" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="merchandise.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="merchandise.quantity" autocomplete="off"></el-input>
        </el-form-item>
        <!--            <el-form-item label="活动区域">-->
        <!--              <el-select v-model="form.region" placeholder="请选择活动区域">-->
        <!--                <el-option label="区域一" value="shanghai"></el-option>-->
        <!--                <el-option label="区域二" value="beijing"></el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {serverIp} from "../../public/config";
export default {
  name: "BackShoppingCart",
  data() {
    return {
      serverIp: serverIp,
      tableData: [],
      total: 0,
      names: "",
      price: 0,
      specification: "",
      merchandise: {},
      dialogFormVisible: false,
      multipleSelection: [],
      pageNum: 1,
      pageSize: 5,
      headerBg: 'headerBg',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      // 请求分页查询数据
      this.request.get(
          "/shopping-cart/pageZero",
          {
            params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              name: this.names,
              specification: this.specification
              // price: this.price
            }
          }
      ).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
      // fetch(
      //     "http://serverIp:9090/merchandise/page?pageNum=" + this.pageNum
      //     + "&pageSize=" + this.pageSize
      //     + "&names=" + this.names
      //     + "&specification=" + this.specification
      //     + "&price=" + this.price
      // ).then(res => res.json()).then(res => {
      //   console.log(res)
      //   this.tableData = res.data
      //   this.total = res.total
      // })
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.merchandise = {}
    },
    handleEdit(row) {
      this.merchandise = row
      this.dialogFormVisible = true
    },
    handlerDel(id) {
      this.request.delete("/shopping-cart/delete/" + id).then(res => {
        if (res.code === "200") {
          this.$message.success("删除订单信息成功！")
          // 删除成功后刷新页面
          this.load()
        } else {
          this.$message.error("删除订单信息失败！")
        }
      })
    },
    handleDelBatch() {
      let ids = this.multipleSelection.map(v => v.id) // {[1,,,],[2,,,]} ==>[1,2]
      this.request.post("/shopping-cart/deleteBatch", ids).then(res => {
        if (res.code === "200") {
          this.$message.success("批量删除订单信息成功！")
          // 批量删除成功后刷新页面
          this.load()
        } else {
          this.$message.error("批量删除订单信息失败！")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    reset() {
      this.names = ""
      this.specification = ""
      // this.price = ""
      //  清空表单后  刷新一下页面
      this.load()

    },
    save() {
      // 提交表单验证
      this.request.post(
          "/shopping-cart", this.merchandise).then(res => {
        if (res.code === "200") {
          this.$message.success("提交订单信息成功！")
          // 成功后关闭弹窗，并且刷新页面
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("提交订单信息失败！")
        }
      })
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee !important;
}
</style>